<template>
	<view class="w">
		<!-- 这是首页进来的积分页面 -->
		<view class="top-banner">
			<navigator url="/pages/fun/jifen_record/jifen_record">
				<view class="top-banner-left">
					<view class="top-banner-left-num">
						<span>{{ score }}</span>
						积分
						<u-icon name="arrow-right" color="#F1F2F3" size="9px"></u-icon>
					</view>
					<view class="top-banner-left-ps">点击查看积分获取使用记录</view>
				</view>
			</navigator>
			<navigator url="../jifen_list/jifen_list">
				<view class="top-banner-right"><view class="top-banner-right-get">获 取 积 分</view></view>
			</navigator>
		</view>
		<view class="center-banner">
			<view class="center-banner-left">道具兑换</view>
			<navigator url="../jifen_prop/jifen_prop">
				<view class="center-banner-right">
					<u-icon name="shopping-cart-fill" color="#2979FF" size="18px"></u-icon>
					<span>我的道具</span>
				</view>
			</navigator>
		</view>
		<view class="box">
			<view class="under-box-one">
				<navigator url="#">
					<view class="under-box-one-one">
						<image :src="prop[0].imageurl" mode="aspectFit" class="p"></image>
						<view class="c">{{ prop[0].name }}</view>
						<view class="n">{{ prop[0].fee }}</view>
					</view>
				</navigator>
				<navigator url="#">
					<view class="under-box-one-two">
						<image :src="prop[1].imageurl" mode="aspectFit" class="p"></image>
						<view class="c">{{ prop[1].name }}</view>
						<view class="n">{{ prop[1].fee }}</view>
					</view>
				</navigator>
			</view>
			<view class="under-box-two">
				<navigator url="#">
					<view class="under-box-two-one">
						<image :src="prop[2].imageurl" mode="aspectFit" class="p"></image>
						<view class="c">{{ prop[2].name }}</view>
						<view class="n">{{ prop[2].fee }}</view>
					</view>
				</navigator>
				<navigator url="#">
					<view class="under-box-two-two">
						<image :src="prop[3].imageurl" mode="aspectFit" class="p"></image>
						<view class="c">{{ prop[3].name }}</view>
						<view class="n">{{ prop[3].fee }}</view>
					</view>
				</navigator>
			</view>
			<view class="under-box-three">
				<navigator url="#">
					<view class="under-box-three-one">
						<image :src="prop[4].imageurl" mode="aspectFit" class="p"></image>
						<view class="c">{{ prop[4].name }}</view>
						<view class="n">{{ prop[4].fee }}</view>
					</view>
				</navigator>
				<navigator url="#">
					<view class="under-box-three-two">
						<image :src="prop[5].imageurl" mode="aspectFit" class="p"></image>
						<view class="c">{{ prop[5].name }}</view>
						<view class="n">{{ prop[5].fee }}</view>
					</view>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			score: '',
			prop: [
				{
					index: '0',
					name: '切换座位',
					fee: '10积分',
					imageurl: 'https://xinguan-parent2.oss-cn-hangzhou.aliyuncs.com/all/15-26-51.png'
				},
				{
					index: '1',
					name: '小纸条',
					fee: '10积分',
					imageurl: 'https://xinguan-parent2.oss-cn-hangzhou.aliyuncs.com/all/15-27-11.png'
				},
				{
					index: '2',
					name: '秒选道具',
					fee: '280积分',
					imageurl: 'https://xinguan-parent2.oss-cn-hangzhou.aliyuncs.com/all/15-27-15.png'
				},
				{
					index: '3',
					name: '解除黑名单',
					fee: '360积分',
					imageurl: 'https://xinguan-parent2.oss-cn-hangzhou.aliyuncs.com/all/15-27-24.png'
				},
				{
					index: '4',
					name: '消除违规记录',
					fee: '100积分',
					imageurl: 'https://xinguan-parent2.oss-cn-hangzhou.aliyuncs.com/all/15-27-20.png'
				},
				{
					index: '5',
					name: '推迟15分钟签到',
					fee: '50积分',
					imageurl: 'https://xinguan-parent2.oss-cn-hangzhou.aliyuncs.com/all/15-27-33.png'
				}
			]
		};
	},
	methods: {
		init() {
			console.log(this.userinfo);
			this.score = this.userinfo.ranks
		}
	},
	computed: {
		...mapState(['userinfo'])
	},
	onLoad() {
		this.init();
		// console.log(this.userinfo);
		console.log(this.userinfo.id);
		// // this.username = this.userinfo.username;
	}
};
</script>

<style>
.top-banner {
	height: 53px;
	margin: 21px 10px 10px 10px;
	padding-top: 20px;
	padding-bottom: 20px;
	padding-left: 20px;
	border-radius: 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: url(https://xinguan-parent2.oss-cn-hangzhou.aliyuncs.com/bg/jifen-banner-back.png);
	background-position: right top;
	background-repeat: no-repeat;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.top-banner-left {
	display: flex;
	flex-direction: column;
}
.top-banner-left-num {
	color: #f1f2f3;
	font-size: 10px;
	margin-bottom: 1px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.top-banner-left-num span {
	font-size: 20px;
	font-weight: 700;
	margin-right: 5px;
}
.top-banner-left-ps {
	color: #f1f2f3;
	font-size: 10px;
	margin-bottom: 5px;
}
.top-banner-right {
	justify-content: flex-end;
	border-radius: 25px 0 0 25px;
	padding: 6px 6px 6px 0;
	padding-left: 13px;
	background-color: #f1f2f3;
	box-shadow: -5px 0px 8px rgba(0, 0, 0, 0.2);
}
.top-banner-right-get {
	font-size: 13px;
	font-weight: 700;
	color: #2979ff;
}
.center-banner {
	margin: 0 10px 10px 10px;
	padding: 0 9px 0 9px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.center-banner-left {
	color: #000000;
	font-weight: 700;
	font-size: 15px;
}
.center-banner-right {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	color: #2979ff;
	font-size: 13px;
}
.center-banner-right span {
	padding-left: 3px;
}
.box {
	display: flex;
	flex-direction: column;
	/* 	justify-content: space-around;
	align-content: space-between; */
}
.under-box-one,
.under-box-two,
.under-box-three {
	display: flex;
	/* justify-content: space-between; */
	justify-content: space-around;
	/* align-items: center; */
	margin: 0 10px 16px 10px;
	padding: 0 9px 0 9px;
}
.under-box-one-one,
.under-box-one-two,
.under-box-two-one,
.under-box-two-two,
.under-box-three-one,
.under-box-three-two {
	display: flex;
	background-color: rgba(0, 0, 0, 0.05);
	border-radius: 15px;
	height: 140px;
	width: 160px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.07), 0 6px 20px 0 rgba(0, 0, 0, 0.03);
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
}

.under-box-one-one .n,
.under-box-one-two .n,
.under-box-two-one .n,
.under-box-two-two .n,
.under-box-three-one .n,
.under-box-three-two .n {
	background-color: rgba(0, 0, 0, 0.07);
	color: #555555;
	border-radius: 5px;
	width: 121px;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 7px;
}
.under-box-one-one .p,
.under-box-one-two .p,
.under-box-two-one .p,
.under-box-two-two .p,
.under-box-three-one .p,
.under-box-three-two .p {
	width: 70px;
	height: 70px;
}
.under-box-one-one .c,
.under-box-one-two .c,
.under-box-two-one .c,
.under-box-two-two .c,
.under-box-three-one .c,
.under-box-three-two .c {
	color: #000000;
	font-weight: 700;
	font-size: 17px;
	margin-bottom: 3px;
}
</style>
